<div class="layui-fluid" id="VIEW-list-table" lay-title="产品列表" lig-title="product-title">
    <div class="layui-row layui-col-space10">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header" lig-lang="label-searchTitle">筛选数据</div>
                <div class="layui-card-body">
                    <form class="layui-form" lay-filter="lig-product-searchform">
                        <div class="layui-row">
                            <div class="layui-inline">
                                <label class="layui-form-label" lig-lang="product-name">名称</label>
                                <div class="layui-inline">
                                    <input type="text" class="layui-input" name="name" />
                                </div>
                            </div>
                            <div class="layui-inline">
                                <div class="layui-row layui-col-space10">
                                    <div class="layui-col-xs6">
                                        <div class="layui-btn layui-btn-sm layui-btn-fluid" lay-filter="lig-product-search" lig-lang="btn-search">查询</div>
                                    </div>
                                    <div class="layui-col-xs6">
                                        <button type="reset" class="layui-btn layui-btn-sm layui-btn-primary" lig-lang="btn-reset">重置</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-body nepadmin-table-full">
                    <div class="layui-btn-container nepadmin-pad-t10 nepadmin-pad-l10">
                        <div class="layui-btn layui-btn-sm" lay-filter="lig-product-add" lig-lang="btn-addproduct">添加产品</div><!--添加参数-->
                    </div>
                    <table lay-filter="lig-product-table"></table>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="tpl-row-toolBar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="lig-modify" lig-lang="btn-modify">修改</a>
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="lig-delete" lig-lang="btn-delete">删除</a>
</script>
<script type="text/html" id="tpl-product-add">
    <form class="layui-form" style="padding: 20px 20px 0 0;" lay-filter="lig-saveForm">
        <div class="layui-form-item">
            <label class="layui-form-label">产品图片:</label>
            <div class="layui-input-inline">
                <div class="layui-upload-list" style="margin:0">
                    <input type="hidden" name="imgs" value=""/>
                    <img src='' 
                    id="srcimgurl" 
                    class="layui-upload-img"
                    style="width:90px;height:90px;">
                </div>
            </div>
            <div class="layui-input-inline">
                <button type="button" class="layui-btn layui-btn-primary" id="editimg">修改图片</button>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label ligui-form-item-required" lig-lang="product-name">名称:</label>
            <div class="layui-input-block">
                <input type="text" name="name" autocomplete="off" lay-verify="required" class="layui-input"
                        value=''>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">种类:</label>
            <div class="layui-input-block">
                <select name="categoryId">
                    
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">产品:</label>
            <div class="layui-input-block">
                <select name="productType">
                    <option value='1'>真抹茶莱莉</option>
                    <option value='2'>真抹茶芝士奶昔</option>
                    <option value='3'>牛油果卡士酸奶</option>
                    <option value='4'>牛油果椰椰</option>
                    <option value='5'>茉莉绿 </option>
                    <option value='6'>桂花乌龙</option>
                    <option value='7'>三无红糖珍珠奶茶</option>
                    <option value='8'>纯奶三无红糖珍珠</option>
                    <option value='9'>茉莉三无红糖珍珠</option>
                    <option value='10'>三无荔浦芋泥椰</option>
                    <option value='11'>锡兰红</option>
                    <option value='12'>高山乌龙茶</option>
                    <option value='13'>红玉</option>
                    <option value='14'>芒果莱莉绿</option>
                    <option value='15'>杨枝甘露 </option>
                    <option value='16'>手剥粒粒桑葚</option>
                    <option value='17'>手剥粒粒葡萄</option>
                    <option value='18'>生榨椰椰</option>
                    <option value='19'>牛油果甘露</option>
                    <option value='20'>手捣丹东草莓</option>
                    <option value='21'>芒芒冻冻</option>
                    <option value='22'>满杯红西柚</option>
                    <option value='23'>暴打广东香水柠檬。 </option>
                    <option value='24'>雪顶锡兰红</option>
                    <option value='25'>雪顶红玉</option>
                    <option value='26'>芝士手剥葡萄 </option>
                    <option value='27'>芝士手剥桑葚</option>
                    <option value='28'>芝士丹东草莓</option>
                    <option value='29'>红玉纯茶</option>
                    <option value='30'>芝士红玉纯茶</option>
                    <option value='31'>茉莉纯茶</option>
                    <option value='32'>芝士茉莉纯茶</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">糖用量:</label>
            <div class="layui-input-inline" style="width: 100px;">
                <select name="sugarType" lay-verify="required">
                    <option value="3">3分</option>
                    <option value="2">5分</option>
                    <option value="1">7分</option>
                </select>
            </div>
            <div class="layui-form-mid"></div>
            <div class="layui-input-inline" style="width: 100px;">
                <input type="text" name="sugarWeight" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">g</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">冰用量:</label>
            <div class="layui-input-block">
                <select name="iceType" lay-verify="required">
                    <option value="1">少冰</option>
                    <option value="2">去冰</option>
                    <option value="3">热饮</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">份量:</label>
            <div class="layui-input-block">
                <select name="cupType" lay-verify="required">
                    <option value="1">中杯</option>
                    <option value="2">大杯</option>
                    
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">原料:</label>
            <div class="layui-input-inline" style="width: 400px;">
                <table class="layui-table" lay-skin="line" lay-size="sm">
                  <colgroup>
                    <col width="150">
                    <col width="200">
                    <col>
                  </colgroup>
                  <thead>
                    <tr>
                      <th>原料名</th>
                      <th>用量</th>
                      <th></th>
                    </tr> 
                  </thead>
                  <tbody>
                    <tr>
                      <td colspan="3" style="text-align: center;">
                          <input type="button" value="新增一行" id="btn-product-add-row" class="layui-btn layui-btn-primary layui-btn-sm">
                      </td>
                    </tr>
                  </tbody>
                </table>
            </div>
        </div>
    </form>
</script>
<script type="text/html" id="tpl-product-modify">
    <form class="layui-form" style="padding: 20px 20px 0 0;" lay-filter="lig-saveForm">
        <input type="hidden" name="productId" value="{{d.productId}}"/>
        <div class="layui-form-item">
            <label class="layui-form-label">产品图片:</label>
            <div class="layui-input-inline">
                <div class="layui-upload-list" style="margin:0">
                    <input type="hidden" name="imgs" value="{{d.imgs}}"/>
                    <img src='{{d.imgs}}' 
                    id="srcimgurl" 
                    class="layui-upload-img"
                    style="width:90px;height:90px;">
                </div>
            </div>
            <div class="layui-input-inline">
                <button type="button" class="layui-btn layui-btn-primary" id="editimg">修改图片</button>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label ligui-form-item-required" lig-lang="product-name">名称:</label>
            <div class="layui-input-block">
                <input type="text" name="name" autocomplete="off" lay-verify="required" class="layui-input"
                        value='{{ d.name }}'>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">种类:</label>
            <div class="layui-input-block">
                <select name="categoryId" lay-data='{{ d.categoryId }}'>
                    
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">产品:</label>
            <div class="layui-input-block">
                <select name="productType" lay-verify="required">
                    <option value='01' {{# if (d.productType == 1) { }} selected {{# } }}>真抹茶莱莉</option>
                    <option value='02' {{# if (d.productType == 2) { }} selected {{# } }}>真抹茶芝士奶昔</option>
                    <option value='03' {{# if (d.productType == 3) { }} selected {{# } }}>牛油果卡士酸奶</option>
                    <option value='04' {{# if (d.productType == 4) { }} selected {{# } }}>牛油果椰椰</option>
                    <option value='05' {{# if (d.productType == 5) { }} selected {{# } }}>茉莉绿 </option>
                    <option value='06' {{# if (d.productType == 6) { }} selected {{# } }}>桂花乌龙</option>
                    <option value='07' {{# if (d.productType == 7) { }} selected {{# } }}>三无红糖珍珠奶茶</option>
                    <option value='08' {{# if (d.productType == 8) { }} selected {{# } }}>纯奶三无红糖珍珠</option>
                    <option value='09' {{# if (d.productType == 9) { }} selected {{# } }}>茉莉三无红糖珍珠</option>
                    <option value='10' {{# if (d.productType == 10) { }} selected {{# } }}>三无荔浦芋泥椰</option>
                    <option value='11' {{# if (d.productType == 11) { }} selected {{# } }}>锡兰红</option>
                    <option value='12' {{# if (d.productType == 12) { }} selected {{# } }}>高山乌龙茶</option>
                    <option value='13' {{# if (d.productType == 13) { }} selected {{# } }}>红玉</option>
                    <option value='14' {{# if (d.productType == 14) { }} selected {{# } }}>芒果莱莉绿</option>
                    <option value='15' {{# if (d.productType == 15) { }} selected {{# } }}>杨枝甘露 </option>
                    <option value='16' {{# if (d.productType == 16) { }} selected {{# } }}>手剥粒粒桑葚</option>
                    <option value='17' {{# if (d.productType == 17) { }} selected {{# } }}>手剥粒粒葡萄</option>
                    <option value='18' {{# if (d.productType == 18) { }} selected {{# } }}>生榨椰椰</option>
                    <option value='19' {{# if (d.productType == 19) { }} selected {{# } }}>牛油果甘露</option>
                    <option value='20' {{# if (d.productType == 20) { }} selected {{# } }}>手捣丹东草莓</option>
                    <option value='21' {{# if (d.productType == 21) { }} selected {{# } }}>芒芒冻冻</option>
                    <option value='22' {{# if (d.productType == 22) { }} selected {{# } }}>满杯红西柚</option>
                    <option value='23' {{# if (d.productType == 23) { }} selected {{# } }}>暴打广东香水柠檬。 </option>
                    <option value='24' {{# if (d.productType == 24) { }} selected {{# } }}>雪顶锡兰红</option>
                    <option value='25' {{# if (d.productType == 25) { }} selected {{# } }}>雪顶红玉</option>
                    <option value='26' {{# if (d.productType == 26) { }} selected {{# } }}>芝士手剥葡萄 </option>
                    <option value='27' {{# if (d.productType == 27) { }} selected {{# } }}>芝士手剥桑葚</option>
                    <option value='28' {{# if (d.productType == 28) { }} selected {{# } }}>芝士丹东草莓</option>
                    <option value='29' {{# if (d.productType == 29) { }} selected {{# } }}>红玉纯茶</option>
                    <option value='30' {{# if (d.productType == 30) { }} selected {{# } }}>芝士红玉纯茶</option>
                    <option value='31' {{# if (d.productType == 31) { }} selected {{# } }}>茉莉纯茶</option>
                    <option value='32' {{# if (d.productType == 32) { }} selected {{# } }}>芝士茉莉纯茶</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">糖用量:</label>
            <div class="layui-input-inline" style="width: 100px;">
                <select name="sugarType" lay-verify="required">
                    <option value="3" {{# if (d.productType == 3) { }} selected {{# } }}>3分</option>
                    <option value="2" {{# if (d.productType == 2) { }} selected {{# } }}>5分</option>
                    <option value="1" {{# if (d.productType == 1) { }} selected {{# } }}>7分</option>
                </select>
            </div>
            <div class="layui-form-mid"></div>
            <div class="layui-input-inline" style="width: 100px;">
                <input type="text" name="sugarWeight" autocomplete="off" class="layui-input" 
                value='{{ d.sugarWeight == null ? "" : d.sugarWeight }}'>
            </div>
            <div class="layui-form-mid layui-word-aux">g</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">冰用量:</label>
            <div class="layui-input-block">
                <select name="iceType" lay-verify="required">
                    <option value="1" {{# if (d.productType == 1) { }} selected {{# } }}>少冰</option>
                    <option value="2" {{# if (d.productType == 2) { }} selected {{# } }}>去冰</option>
                    <option value="3" {{# if (d.productType == 3) { }} selected {{# } }}>热饮</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">份量:</label>
            <div class="layui-input-block">
                <select name="cupType" lay-verify="required">
                    <option value="1" {{# if (d.productType == 1) { }} selected {{# } }}>中杯</option>
                    <option value="2" {{# if (d.productType == 2) { }} selected {{# } }}>大杯</option>
                    
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">原料:</label>
            <div class="layui-input-inline" style="width: 400px;">
                <input type="hidden" name="ingredientList" value='{{ JSON.stringify(d.ingredientList) }}' />
                <table class="layui-table" lay-skin="line" lay-size="sm">
                  <colgroup>
                    <col width="150">
                    <col width="200">
                    <col>
                  </colgroup>
                  <thead>
                    <tr>
                      <th>原料名</th>
                      <th>用量</th>
                      <th></th>
                    </tr> 
                  </thead>
                  <tbody>
                    <tr>
                      <td colspan="3" style="text-align: center;">
                          <input type="button" value="新增一行" id="btn-product-add-row" class="layui-btn layui-btn-primary layui-btn-sm">
                      </td>
                    </tr>
                  </tbody>
                </table>
            </div>
        </div>
    </form>
</script>
<script type="text/html" id="tpl-product-ingredient-row">
    <tr name="product-ingredient-row">
      <td>
        <select name="ingredientName">
            {{#  layui.each(d.data, function(index, item){ }}
            <option value='{{ item.ingredientId }}' data-name='{{ item.name }}'>{{ item.name }}</option>
            {{#  }); }}
        </select>
      </td>
      <td>
         <div class="layui-input-inline" style="width: 100px;">
            <input type="text" name="weight" autocomplete="off" class="layui-input" value="0">
        </div>
        <div class="layui-form-mid layui-word-aux">g</div>
      </td>
      <td>
          <input type="button" value="删除" name="product-ingredient-row-delete" class="layui-btn layui-btn-danger layui-btn-sm">
      </td>
    </tr>
</script>
<script type="text/html" id="tpl-product-ingredient-modify">
    {{#  layui.each(d.list, function(i, it){ }}
    <tr name="product-ingredient-row">
      <td>
        <select name="ingredientName">
            {{#  layui.each(d.ingredientList, function(index, item){ }}
            <option value='{{ item.ingredientId }}' 
            data-name='{{ item.name }}' {{# if (item.ingredientId == it.ingredientId) { }} selected {{# } }}>{{ item.name }}</option>
            {{#  }); }}
        </select>
      </td>
      <td>
         <div class="layui-input-inline" style="width: 100px;">
            <input type="text" name="weight" autocomplete="off" class="layui-input" value="{{ it.weight }}">
        </div>
        <div class="layui-form-mid layui-word-aux">g</div>
      </td>
      <td>
          <input type="button" value="删除" name="product-ingredient-row-delete" class="layui-btn layui-btn-danger layui-btn-sm">
      </td>
    </tr>
    {{#  }); }}
</script>
<script>
    layui.use(['laydate', 'admin', 'table', 'form', 'dropdown', 'laytpl', 'jquery','lig2', 'upload', 'conf'], 
        function (laydate, admin, table, form, dropdown, laytpl, $, lig, upload, conf) {
        //lig.filter();

        form.render();
        

        lig.table({
            elem: '[lay-filter="lig-product-table"]',
            url: 'milktea/product/page',
            cols: [[
                { title: '<span lig-lang="label-opt">操作</span>', toolbar: '#tpl-row-toolBar', align: 'left', width: 120, fixed: 'left'},
                { title: '<span lig-lang="product-name">编号</span>', field: 'productCode', minWidth: 120 },
                { title: '<span lig-lang="product-name">名称</span>', field: 'name', minWidth: 120 },
                { title: '<span lig-lang="product-version">产品</span>', field: 'productTypeName', minWidth: 60 },
                { title: '<span lig-lang="product-downloadAddress">糖用量</span>', field: 'sugarTypeText', minWidth: 100 },
                { title: '<span lig-lang="product-content">冰用量</span>', field: 'iceTypeName', minWidth: 120 },
                { title: '<span lig-lang="product-content">份量</span>', field: 'cupTypeName', minWidth: 120 },
            ]],
            done: function () {
                lig.filter($('[lay-filter="lig-product-table"]'));
            }
        },{
            mode:'dialog',
            entity: 'product',
            primaryField: 'productId',
            addContent: $('#tpl-product-add').html(),
            addUrl: 'milktea/product/add',
            addTitle: '<span lig-lang="product-addproduct">添加产品</span>',
            area: ['70%', '90%'],
            onAddOpened: function() {

                // 种类列表
                lig.loadSelect('milktea/category/selected/option', '[lay-filter="lig-saveForm"] select[name="categoryId"]', true);

                var uploadInst = upload.render({
                    elem: '#editimg' //绑定元素
                    ,url: conf.requestUrl + '/setting/file/upload' //上传接口
                    ,done: function(res){
                      //上传完毕回调
                      $('#srcimgurl').attr('src', conf.requestUrl + '/setting/file/output?fileUrl=' + res.data[0].fileUrl);
                      $('[lay-filter="lig-saveForm"]').find('input[name="imgs"]').val(res.data[0].fileUrl);
                    }
                    ,error: function(){
                      //请求异常回调
                    }
                });
                //$('#srcimgurl').attr('src', conf.requestUrl + '/setting/file/output?fileUrl=1638423174914871298.jpeg');
                //$('[lay-filter="lig-saveForm"]').find('input[name="imgs"]').val('1638423174914871298.jpeg');

                $("#btn-product-add-row").unbind('click').bind('click', function () {
                    var $this = $(this);
                    lig.ajaxget({
                        url: 'milktea/ingredient/list',
                        success: function(res) {
                            if (res.success) {
                                laytpl($('#tpl-product-ingredient-row').html()).render(res, function(html) {
                                    $this.parents('tr').before(html);
                                    form.render();

                                    $('[lay-filter="lig-saveForm"]').find('input[name="product-ingredient-row-delete"]')
                                        .unbind('click')
                                        .bind('click', function() {
                                            $(this).parents('tr').remove();
                                        });
                                    // form.on('select(productIngredient)', function(data){
                                    //     var pump = $(data.elem[data.elem.selectedIndex]).data('pump');
                                    //     $this.parents('tr').find('input[name="pump"]');
                                    // });
                                });
                            }
                        }
                    });
                    
                });

            },

            modifyContent: $('#tpl-product-modify').html(),
            modifyUrl: 'milktea/product/modify',
            modifyTitle: '<span lig-lang="product-modifyproduct">修改产品</span>',
            onModifyOpened: function() {
                var _form = '[lay-filter="lig-saveForm"]';

                // 种类列表
                lig.loadSelect('milktea/category/selected/option', '[lay-filter="lig-saveForm"] select[name="categoryId"]', true);

                var uploadInst = upload.render({
                    elem: '#editimg' //绑定元素
                    ,url: conf.requestUrl + '/setting/file/upload' //上传接口
                    ,done: function(res){
                      //上传完毕回调
                      $('#srcimgurl').attr('src', conf.requestUrl + '/setting/file/output?fileUrl=' + res.data[0].fileUrl);
                      $('[lay-filter="lig-saveForm"]').find('input[name="imgs"]').val(res.data[0].fileUrl);
                    }
                    ,error: function(){
                      //请求异常回调
                    }
                });

                var imgs = $('[lay-filter="lig-saveForm"]').find('input[name="imgs"]').val();
                $('#srcimgurl').attr('src', conf.requestUrl + '/setting/file/output?fileUrl=' + imgs);


                lig.ajaxget({
                    url: 'milktea/ingredient/list',
                    success: function(res) {
                        if (res.success) {
                            var list = $('[lay-filter="lig-saveForm"]').find('input[name="ingredientList"]').val();
                            var data = {
                                list: JSON.parse(list),
                                ingredientList: res.data
                            };

                            laytpl($('#tpl-product-ingredient-modify').html()).render(data, function(html) {
                                $("#btn-product-add-row").parents('tr').before(html);
                                form.render();

                                $('[lay-filter="lig-saveForm"]').find('input[name="product-ingredient-row-delete"]')
                                    .unbind('click')
                                    .bind('click', function() {
                                        $(this).parents('tr').remove();
                                    });
                                // form.on('select(productIngredient)', function(data){
                                //     var pump = $(data.elem[data.elem.selectedIndex]).data('pump');
                                //     $this.parents('tr').find('input[name="pump"]');
                                // });
                            });
                        }
                    }
                });

                $("#btn-product-add-row").unbind('click').bind('click', function () {
                    var $this = $(this);
                    lig.ajaxget({
                        url: 'milktea/ingredient/list',
                        success: function(res) {
                            if (res.success) {
                                laytpl($('#tpl-product-ingredient-row').html()).render(res, function(html) {
                                    $this.parents('tr').before(html);
                                    form.render();

                                    $('[lay-filter="lig-saveForm"]').find('input[name="product-ingredient-row-delete"]')
                                        .unbind('click')
                                        .bind('click', function() {
                                            $(this).parents('tr').remove();
                                        });
                                });
                            }
                        }
                    });
                    
                });
            },

            removeUrl: 'milktea/product/remove',
            getUrl: 'milktea/product/{productId}',
            onSave: function(data) {
                var ingredientList = [];

                $('[lay-filter="lig-saveForm"]').find('tr[name="product-ingredient-row"]').each(function(i, it) {
                    var option = $(it).find('select[name="ingredientName"] option:selected');
                    ingredientList.push({
                        ingredientId: option.val(),
                        name: option.data('name'),
                        weight: $(it).find('input[name="weight"]').val()
                    });
                });
                data.ingredientList = ingredientList;
                return data;
            }
        });

    })
</script>